.navigator {
    @nav_min_height: 44px;
    @page_hor_margin: 16px;
    @action_area_width: 4em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: @nav_min_height;
    .left {
        flex-basis: @action_area_width;
        flex-grow: 1;
        flex-shrink: 1;
        padding: 0 0 0 @page_hor_margin;
        display: flex;
        justify-content: flex-start;
    }
    .center {
        flex-basis: content;
        flex-grow: 4;
        flex-shrink: 4;
        display: flex;
        justify-content: center;
    }
    .right {
        flex-basis: @action_area_width;
        flex-grow: 1;
        flex-shrink: 1;
        padding: 0 @page_hor_margin 0 0;
        display: flex;
        justify-content: flex-end;
    }


    @item_height: 36px;
    @nav_font_size: 14px;
    @back_icon_height: 22px;
    .left_item {
        width: 100%;
        height: @item_height;
        line-height: @item_height;
        vertical-align: middle;
        margin: 0;
        padding-left: @back_icon_height;
        background-image: url("./assets/back-icon.png");
        background-size: auto @back_icon_height;
        background-position: left center;
        background-repeat: no-repeat;
    }
    .center_item {
        line-height: @item_height;
        vertical-align: middle;
        margin: 0;
    }
    .right_item {
        width: 100%;
        height: @item_height;
        line-height: @item_height;
        vertical-align: middle;
        margin: 0;
        background-image: url("./assets/share-icon.png");
        background-size: auto @back_icon_height;
        background-position: right center;
        background-repeat: no-repeat;
    }
}